<template>
  <el-dialog
    title="测点定位"
    :visible="visible"
    width="800px"
    v-dialogDrag
    :before-close="handleCancel"
  >
    <el-form
      :model="pointForm"
      label-width="100px"
      size="medium"
      :rules="pointRules"
      ref="pointFormRef"
    >
      <div class="point-wrapper">
        <div class="point-left">
          <el-form-item>
            <treeMenu :treeData="pointTreeList" name="lable" ref="treeComp" nodeKey="id" @menuLeftClick="handleChangePointTree" expandALL/>
          </el-form-item>
        </div>
        
        <div class="point-right">
          <el-form-item label="测点名称" required prop="pointName">
            <el-input
              v-model="pointForm.pointName"
              placeholder="点击左侧选择名称"
              disabled
            ></el-input>
          </el-form-item>
          
          <el-form-item label="X坐标" required prop="startX">
            <el-input-number
              v-model="pointForm.startX"
              placeholder="请输入X坐标"
              :min="0"
            ></el-input-number>
          </el-form-item>
          
          <el-form-item label="Y坐标" required prop="startY">
            <el-input-number
              v-model="pointForm.startY"
              placeholder="请输入Y坐标"
              :min="0"
            ></el-input-number>
          </el-form-item>
          
          <el-form-item label="测点半径" required prop="pointSize">
            <el-input-number
              v-model="pointForm.pointSize"
              placeholder="请输入测点半径"
              :max="20"
              :min="1"
            ></el-input-number>
          </el-form-item>
          
          <el-form-item label="测点颜色" required prop="color" style="margin-bottom: 6px;">
            <el-color-picker
              v-model="pointForm.color"
              @change="handleChangeColor"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          
          <el-form-item label="是否有边框" required prop="ifBorder">
            <el-radio-group v-model="pointForm.ifBorder">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item
            label="边框粗细"
            required
            prop="borderSize"
            v-if="pointForm.ifBorder && pointForm.ifBorder == 1"
          >
            <el-input-number
              v-model="pointForm.borderSize"
              placeholder="请输入边框粗细"
              :max="5"
              :min="1"
            ></el-input-number>
          </el-form-item>
        </div>
      </div>
    </el-form>
    
    <div class="btnGroup">
      <el-button
        @click="handleCancel"
        size="small"
        icon="el-icon-circle-close"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        @click="handleSave"
        size="small"
        icon="el-icon-circle-check"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { GetTree } from '@/api/https'
import treeMenu from '@/components/base/treeMenu.vue'
export default {
  name: 'PointDialog',
  components:{treeMenu},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    pointForm: {
      type: Object,
      default: () => ({})
    },
    stationId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      pointTreeList: [],
      pointRules: {
        pointName: [
          { required: true, message: '请选择测点名称', trigger: 'change' }
        ],
        startX: [
          { required: true, message: '请输入X坐标', trigger: 'blur' }
        ],
        startY: [
          { required: true, message: '请输入Y坐标', trigger: 'blur' }
        ],
        pointSize: [
          { required: true, message: '请输入测点半径', trigger: 'blur' }
        ],
        ifBorder: [
          { required: true, message: '请选择是否带有边框', trigger: 'change' }
        ],
        borderSize: [
          { required: true, message: '请输入边框大小', trigger: 'blur' }
        ],
        color: [
          { required: true, message: '请选择测点颜色', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.$nextTick(() => {
            this.getCompTree()
            this.resetFormValidation()
          })
        }
      }
    },
    stationId: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.getCompTree()
        }
      }
    }
  },
  methods: {
    async getCompTree() {
      if (!this.stationId) return
      
      try {
        const res = await GetTree(this.stationId, '按部位导航', '')
        if (res.isSuccess) {
          this.pointTreeList = res.data || []
        } else {
          this.pointTreeList = []
        }
      } catch (error) {
        this.pointTreeList = []
      }
    },

    handleChangePointTree(data) {
      const newPointForm = { ...this.pointForm }
      if (data.isBottom) {
        newPointForm.pointName = data.treeName
        newPointForm.code_ID = data.codE_ID
        newPointForm.instR_ID = data.instR_ID
        newPointForm.tp = 1
      } else {
        newPointForm.pointName = ''
        newPointForm.code_ID = ''
        newPointForm.instR_ID = ''
        newPointForm.tp = 1
      }
      
      // 通过事件更新父组件的 pointForm
      this.$emit('update:pointForm', newPointForm)
    },

    handleChangeColor(val) {
      const newPointForm = { ...this.pointForm, color: val }
      this.$emit('update:pointForm', newPointForm)
    },

    resetFormValidation() {
      if (this.$refs.pointFormRef) {
        this.$refs.pointFormRef.clearValidate()
      }
    },

    handleCancel() {
      this.resetFormValidation()
      this.$emit('cancel')
    },

    handleSave() {
      this.$refs.pointFormRef.validate((valid) => {
        if (valid) {
          this.$emit('save', { ...this.pointForm })
        } else {
          this.$message.error('请完善表单信息')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.point-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 20px;
  
  .point-left {
    width: 320px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px;
    
    ::v-deep .el-form-item__content {
      margin-left: 0 !important;
    }
  }
  
  .point-right {
    flex: 1;
    height: 400px;
    overflow-y: auto;
    
    ::v-deep .el-input-number {
      width: 100%;
    }
    
    ::v-deep .el-form-item {
      margin-bottom: 16px;
    }
  }
}


::v-deep .el-dialog__body {
  padding: 20px;
}


::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

::v-deep .el-collapse-item__header{
    font-weight:  bold !important ;
}
</style>